<template>
  <a-form-model
    ref="ruleForm"
    :model="form"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
    style="padding: 24px 24px 24px 40px;height:100%;overflow:auto;"
  >
    <a-form-model-item label="服务代码" required prop="serviceCode" >
      <a-select style="width: 100%" v-model="form.serviceCode" :disabled="isEdit" placeholder="请选择服务代码" @change="handleChange">
        <a-select-option v-for="(i,index) in serverList" :value="i.serviceCode" :key="index">
          {{ i.serviceCode }}
        </a-select-option>
      </a-select>
    </a-form-model-item>
    <a-form-model-item label="服务名称" required prop="serviceName">
      <a-input class="service-name-input" v-model="form.serviceName" :disabled="true" />
    </a-form-model-item>
    <a-form-model-item label="服务归属域" required prop="serviceScope">
      <a-input v-model="form.serviceScope" />
    </a-form-model-item>
    <a-form-model-item label="服务分类" required prop="serviceType">
      <a-input v-model="form.serviceType" />
    </a-form-model-item>
    <a-form-model-item label="服务说明" prop="serviceDesc">
      <a-textarea
        v-model="form.serviceDesc"
        :maxLength="200"
        placeholder="请输入服务相关说明，用于内部管理使用"
        :auto-size="{ minRows: 4, maxRows: 6 }"
      />
      <p class="text-len">{{form.serviceDesc.length}}/200</p>
    </a-form-model-item>
    <a-form-model-item label="服务介绍" prop="serviceExplain">
      <a-textarea
        v-model="form.serviceExplain"
        :maxLength="200"
        placeholder="请输入服务功能介绍，用于外部展示"
        :auto-size="{ minRows: 4, maxRows: 6 }"
      />
      <p class="text-len">{{form.serviceExplain.length}}/200</p>
    </a-form-model-item>
<!--    <div-->
<!--      :style="{-->
<!--        position: 'absolute',-->
<!--        right: 0,-->
<!--        bottom: 0,-->
<!--        width: '100%',-->
<!--        borderTop: '1px solid #e9e9e9',-->
<!--        padding: '10px 16px',-->
<!--        background: '#fff',-->
<!--        textAlign: 'right',-->
<!--        zIndex: 1,-->
<!--      }"-->
<!--    >-->
<!--      <a-button :style="{ marginRight: '8px' }" @click="onClose">-->
<!--        取消-->
<!--      </a-button>-->
<!--      <a-button type="primary" @click="onSubmit">-->
<!--        确认-->
<!--      </a-button>-->
<!--    </div>-->
  </a-form-model>
</template>
<script>
import { axios } from '@/utils/request'
export default {
  name: 'ModelManage',
  components: {

  },
  data () {
    return {
      serverList: [],
      labelCol: { span: 5 },
      wrapperCol: { span: 18 },
      other: '',
      form: {
        serviceCode: '',
        serviceName: '',
        serviceScope: '',
        serviceType: '',
        serviceDesc: '',
        serviceExplain: ''
      },
      rules: {
        serviceCode: [
          { required: true, message: '请输入服务代码', trigger: 'change' }
        ],
        serviceName: [
          { required: true, message: '请输入服务名称', trigger: 'change' }
        ],
        serviceScope: [
          { required: true, message: '请输入服务归属域', trigger: 'change' }
        ],
        serviceType: [
          { required: true, message: '请输入服务分类', trigger: 'change' }
        ]
      },
    }
  },
  props: {
    state: {
      type: String,
      default: 'add'
    },
    // serverList: {
    //   type: Array,
    //   default () { return [] }
    // }
    recordData: {
      type: Object,
      default () { return {} }
    }
  },
  computed: {
    isEdit: function () {
      return this.state === 'edit'
    }
  },
  watch: {

  },
  mounted () {
    this.getServiceList();
    this.form = Object.assign(this.form, this.recordData);
  },
  methods: {
    getServiceList() {
      axios.get('/service-sale/service/member/serviceList').then(data => {
        // this.loading = false
        // console.log(data)
        this.serverList = data.data
      })
    },
    getFormData () {
      console.log(this.form)
      const params = {
        serviceCode: this.form.serviceCode,
        serviceName: this.form.serviceName,
        serviceScope: this.form.serviceScope,
        serviceType: this.form.serviceType,
        serviceDesc: this.form.serviceDesc,
        serviceExplain: this.form.serviceExplain
      }
      if (this.isEdit) params.id = this.form.id
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            this.$confirm({
              title: this.isEdit ? '确认保存修改？' : '确认添加？',
              content: '',
              onOk: () => {
                resolve(params);
              },
              onCancel () {
                console.log('Cancel')
              },
              class: 'test'
            })
          } else {
            reject(valid);
          }
        })
      })
    },
    handleChange (e) {
      console.log(e, 'change')
      this.form.serviceName = this.serverList.find(i => i.serviceCode === e).serviceName
    },
    resetForm () {
      this.$refs.ruleForm.resetFields()
    }
  }
}
</script>
<style lang="less">
.service-name-input {
  &:disabled {
    color: #666;
  }
}
.text-len {
  font-size: 10px;
  color: #aaa;
  text-align: right;
  line-height: 16px;
}
</style>
